<template>
  <div class="heades">
    <div class="dt" v-show="img">
      <img src="../../assets/img/xiong.jpg" alt="" class="fdimg" @click="yc" />
      <img src="../../assets/img/xc.png" alt="" @click="yc" class="fdimgs" />
    </div>
    <div class="tou">
      <img src="../../assets/img/xiong.jpg" alt="" @click="fd" />
    </div>
    <div class="jf">
      <span class="count">积分:347</span>
      <p class="gn">
        <span @click="gotologin" class="logins" v-show="show">登录</span>
        <span v-show="exit" @click="gotologins">退出登录</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      exit: false,
      img: false,
    };
  },
  mounted() {
    if (this.$store.state.token) {
      this.show = false;
      this.exit = true;
    } else {
      this.show = true;
      this.exit = false;
    }
  },
  methods: {
    //点击后再次点击隐藏
    yc() {
      this.img = false;
    },
    //点击头像放大
    fd() {
      this.img = true;
    },
    //退出去到login 登录页面
    gotologins() {
      this.$router.push({ path: "/logindetail" });
      this.$store.commit("exit");
    },
    //去到登陆页面
    gotologin() {
      this.$router.push({ path: "/logindetail" });
    },
  },
};
</script>

<style lang="scss" scoped>
.dt {
  width: 100%;
  height: 100%;
  background: black;
  position: fixed;
  z-index: 999999;
  .fdimg {
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0%;
    top: 25%;
  }
  .fdimgs {
    width: 50%;
    height: 25%;
    position: absolute;
    left: 20%;
    top: 0%;
  }
}
.heades {
  width: 100%;
  height: 3rem;
  background: #c1b18f;
  display: flex;
  justify-content: space-between;
  .tou {
    width: 30%;
    height: 100%;
    position: relative;
    img {
      width: 70%;
      height: 50%;
      display: block;
      position: absolute;
      left: 15%;
      top: 25%;
      border-radius: 50%;
    }
  }
  .jf {
    width: 70%;
    height: 100%;
    position: relative;
    .logins {
      font-size: 0.4rem;
    }
    .count {
      display: block;
      width: 1.5rem;
      height: 0.4rem;
      line-height: 0.4rem;
      text-align: center;
      background: #b3a078;
      position: absolute;
      top: 50%;
      color: white;
    }
    .gn {
      position: absolute;
      top: 70%;
      color: #666;
      width: 1.5rem;
      height: 0.35rem;
      line-height: 0.35rem;
      text-align: center;
      color: white;
    }
  }
}
</style>
